<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height:300px;
            width:200px;
            background: black;
        }
    </style>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script>
        $(function(){
            $("div").on("click",function(){
                $(this).css("height","500px");
            })

           /* $("#btn").on("click",function(){
                //简单事件触发
                $("div").click();
            })*/
            /*$("#btn").on("click",function(){
                //简单事件触发
                $("div").trigger("click");
            })*/

            $("#trigger").on("click",function(){
                /*
                   trigger 触发事件的时候，会触发浏览器的默认行为
                   例如，a 标签的跳转，文本框获得焦点等

                 */
                //$("#txt").trigger("focus");

                /*
                 triggerHandler 触发事件的时候，不会触发浏览器的默认行为，只执行其事件
                 */
                $("#txt").triggerHandler("focus");
            })
            $("#txt").on("focus",function(){
                $("span").text("文本框得到焦点了");
            })
        });
    </script>
</head>
<body>
    <button id="btn">触发div事件</button>
    <input type="button" id="trigger" value="触发文本的事件">
    <input type="text" id="txt">
    <span></span>
    <div>
        <input type="button" value="按钮">
    </div>
</body>
</html>